<%# TODO: change to map of IDs %>
<% reactable_data = notification.json_data["reaction"]["reactable"] %>

<div class="crayons-card notification">
  <div class="relative shrink-0 self-start">
    <% if notification.multiple_reactors? %>
      <a href="<%= notification.actors.first["path"] %>" class="crayons-avatar crayons-avatar--l mr-4" aria-hidden="true" tabindex="-1">
        <img src="<%= notification.actors.first["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= notification.actors.first["username"] %>'s profile" width="48" height="48">
      </a>
      <a href="<%= notification.actors.first["path"] %>" class="crayons-avatar crayons-avatar--l absolute -right-1 -bottom-3 border-solid border-2 border-base-inverted" aria-hidden="true" tabindex="-1">
        <img src="<%= notification.actors.last["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= notification.actors.last["username"] %>'s profile" width="48" height="48">
      </a>
    <% else %>
      <a href="<%= notification.actors.first["path"] %>" class="crayons-avatar crayons-avatar--l m:crayons-avatar--xl" aria-hidden="true" tabindex="-1">
        <img src="<%= notification.actors.first["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= notification.actors.first["username"] %>'s profile" width="48" height="48">
      </a>
    <% end %>
  </div>

  <div class="notification__content pt-2">
    <%= t("views.notifications.reacted.verb_html",
          count: notification.actors.size,
          start: tag("span", { class: %w[inline-block py-1] }, true),
          actors: if notification.actors.size == 1
                    link_to notification.actors.first["name"], notification.actors.first["path"], class: "crayons-link fw-bold"
                  elsif notification.actors.size == 2
                    t("views.notifications.reacted.and_html",
                      first: link_to(notification.actors.first["name"], notification.actors.first["path"], class: "crayons-link fw-bold"),
                      last: link_to(notification.actors.last["name"], notification.actors.last["path"], class: "crayons-link fw-bold"))
                  elsif notification.actors.size > 1
                    t("views.notifications.reacted.and_other_html",
                      first: link_to(notification.actors.first["name"], notification.actors.first["path"], class: "crayons-link fw-bold"),
                      count: notification.actors.size - 1)
                  end,
          # your article/comment or the actual title of the article/comment
          title: link_to(notification.reactable_title.blank? ? t("views.notifications.reacted.your.#{notification.reactable_class.downcase}") : h(notification.reactable_title), notification.reactable_path, class: "crayons-link fw-bold"),
          end: "</span>".html_safe,
          reactions: safe_join(
            notification.unique_reaction_categories.filter_map do |category|
              image_path = reaction_image(category)
              if image_path.present?
                "<span class='crayons-hover-tooltip inline-block' data-tooltip='#{reaction_category_name(category)}'>
                  #{image_tag image_path, class: "reaction-image mx-1 my-1 reaction-icon--#{category}"}
                </span>".html_safe
              end
            end, "\n"
          )) %>
  </div>
</div>
